<template>
  <div>
    <div class="rhls" v-for="item in hotComments" :key="item.id">
    
      <div class="img">
        <img :src="item.user.avatarUrl" alt="" />
      </div>
      <div class="cmts">
        <div class="cmtsitem">
          <div class="itemTitle">
            <h3>{{ item.user.nickname }}</h3>
            <p>{{ item.timeStr }}</p>
          </div>
          <div class="itemLike">
            <span v-if="item.likedCount">{{ item.likedCount }}</span>
            <i class="iconfont icon-dianzan1" @click.stop="addlike(item)"
              :style="{ color: item.liked ? 'red' : '#adadad' }"></i>
          </div>
        </div>
        <div class="itemCent">
          <span>
            {{ item.content }}
          </span>
        </div>
        <div class="reply" v-show="item.beReplied.length > 0">
          <span>{{ item.beReplied.length }}条</span>
          <span @click.stop="showPopup(item)">回复</span>
          <i class="iconfont icon-xiayiyehouyiye" @click.stop="showPopup(item)"></i>
        </div>
      </div>
      <div class="writeaReview">
        <input type="text" placeholder="写评论..." v-model="keyword" @keyup.enter="writeAComment" />
        <span @click="writeAComment">发送</span>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '85%' }" class="popup">
      <div class="top">
        <i class="iconfont icon-fanhui" @click="show = !show"></i>
        <span>回复</span>
      </div>
      <div class="rhls toprhls" v-if="show">
        <div class="img">
          <img :src="playlistItem.user.avatarUrl" alt="" />
        </div>
        <div class="cmts">
          <div class="cmtsitem">
            <div class="itemTitle">
              <h3>{{ playlistItem.user.nickname }}</h3>
              <p>{{ playlistItem.timeStr }}</p>
            </div>
            <div class="itemLike">
              <span v-if="playlistItem.likedCount">{{
                playlistItem.likedCount
                }}</span>
              <i class="iconfont icon-dianzan1"></i>
            </div>
          </div>
          <div class="itemCent">
            <span>
              {{ playlistItem.content }}
            </span>
          </div>
        </div>
      </div>
      <div class="qbhf">
        <div class="qbhftop">
          <h4>全部回复</h4>
          <i class="iconfont icon-paixu-jiangxu"></i>
        </div>
        <div class="rhls toprhls" v-if="show" v-for="(belied, index) in playlistItem.beReplied" :key="index">
          <div class="img">
            <img :src="belied.user.avatarUrl" alt="" />
          </div>
          <div class="cmts">
            <div class="cmtsitem">
              <div class="itemTitle">
                <h3>{{ belied.user.nickname }}</h3>
                <p>{{ playlistItem.timeStr }}</p>
              </div>
              <div class="itemLike">
                <span v-if="belied.likedCount">{{ belied.likedCount }}</span>
                <i class="iconfont icon-dianzan1"></i>
              </div>
            </div>
            <div class="itemCent">
              <span>
                {{ belied.content }}
              </span>
            </div>
          </div>
        </div>
        <div class="writeaReview">
          <input type="text" placeholder="写评论..." v-model.trim="keyword" />
          <span>发送</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { commentsOnTheThumbUp, toSendComments } from "@/api/comment";
import loadmore from "@/components/LoadMore.vue";

export default {
  components: { loadmore },
  props: ["hotComments"],
  data() {
    return {
      show: false,
      playlist:
        JSON.parse(sessionStorage.getItem("playlist")) ||
        this.$route.query.playlist.id,
      playlistItem: {}, //每个评论对象
      keyword: "", //回复评论内容
    };
  },
  methods: {
    //   点赞
    addlike(item) {
      console.log(item);
      let login = window.localStorage.getItem("token");
      // 判断是否登录
      if (login) {
        if (item.liked) {
          commentsOnTheThumbUp(this.playlist.id, item.commentId, 0)
          this.$set(item,item.liked,item.liked=false)
          this.$set(item, item.likedCount, item.likedCount-=1)
        
        } else {
          commentsOnTheThumbUp(this.playlist.id, item.commentId, 1)
          this.$set(item, item.liked, item.liked = true)
          this.$set(item, item.likedCount, item.likedCount += 1)
         
        }
      } else {
        this.$toast({ message: "请登录后操作", position: "bottom" });
      }
    },
    // 写评论
    writeAComment() {
      if(this.keyword==''||this.keyword.length<0) return
      toSendComments(this.playlist.id, this.keyword).then(data=>{ 
        console.log(data);
      });
      this.keyword=''
    },
    //查看回复
    showPopup(item) {
      this.show = true;
      // this.playlistItem = item.beReplied;
      this.playlistItem = item;
    },
  },
  watch:{ 
keyword(){ 
  // console.log(this.keyword);
}
  },
  created() {},
  mounted() {
  
  },
};
</script>

<style lang="scss" scoped>
.rhls {
  margin-top: 5px;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .img {
    flex: 0 0 30px;
    // background-color: pink;
    margin: 0 10px;
    img {
      width: 100%;
      height: 30px;
      // padding-left: 10px;
      border-radius: 50%;
    }
  }
  .cmts {
    flex: 1;
    height: 100%;
    .cmtsitem {
      display: flex;
      justify-content: space-between;
      .itemTitle {
        h3 {
          font-size: 14px;
          color: #646464;
        }
        p {
          font-size: 12px;
          color: #adadad;
        }
      }
      .itemLike {
        flex: 0 0 65px;
        text-align: right;
        margin-right: 5px;
        span {
          font-size: 12px;
          color: #adadad;
          margin-right: 5px;
        }
        i {
          font-size: 14px;
          // color: #adadad;
        }
      }
    }
    .itemCent {
      width: 315px;
      // background-color: skyblue;
      word-wrap: break-word;
      margin-top: 5px;
      padding-bottom: 10px;
      span {
        color: #333;
        margin-top: 5px;
        font-size: 15px;
      }
    }
    // 回复样式
    .reply {
      font-size: 14px;
      color: #458fcf;
      padding-bottom: 10px;
      display: flex;
      align-items: center;

      i {
        font-size: 20px;
        margin-left: -4px;
      }
    }
  }
}
.toprhls {
  padding-top: 40px;
  background-color: #fff;
}
.popup {
  // background-color: #f7f7f7;
}
.top {
  width: 100%;
  position: fixed;
  border-radius: 20px 20px 0 0;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  // padding-bottom: 100px;

  i {
    font-size: 22px;
    margin: 0 10px;
  }
  span {
    font-weight: 600px;
    font-size: 18px;
  }
}
//全部回复
.qbhf {
  .qbhftop {
    height: 30px;
    margin-top: 13px;
    margin-bottom: -40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    h4 {
      font-weight: bold;
      margin-left: 10px;
    }
    i {
      font-size: 18px;
      margin-right: 10px;
      color: #000;
    }
  }
}
//写评论样式
.writeaReview {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 40px;
  z-index: 1;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-top: 1px solid #f7f7f7;
  input {
    flex: 1;
    height: 100%;
    background: none;
    outline: none;
    border: none;
    padding: 0 10px;
  }
  span {
    flex: 0 0 40;

    padding-right: 10px;
  }
}
</style>